
<template>
  <div>
    <p-modal
      :title="title"
      width = '80%'
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >

      <template slot="footer">
        <div>
          <p-button type="primary" @click="handleCancel">取消</p-button>
          <p-button type="primary" @click="save">保存</p-button>
        </div>
      </template>


    <RenderTitle :title="'基本信息'">
    </RenderTitle>
    <p-form-model
        class="skill-form"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
         <p-row :gutter="24">
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="applyNo" label="单据编号" prop="applyNo">
                <p-input
                  disabled
                  v-model="form.applyNo"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillName" label="制单人" prop="skillName">
                <p-input
                  disabled
                  :value="userInfo.name"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="" label="制单日期" prop="">
                <p-input
                  disabled
                  :value="moment().format('YYYY-MM-DD')"
                />

              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="deptname" label="申请部门" prop="deptname">
                <p-input
                  disabled
                  v-model="form.deptname"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="contact2" label="联系人" prop="contact2">
                <p-input
                  v-model="form.contact"
                  @click="showStaffListModal"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="phone" label="联系电话" prop="phone">
                <p-input
                  v-model="form.phone"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="costCenter" label="成本中心" prop="costCenter">
                <p-input
                  v-model="form.costCenter"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="lendRemark" label="借调说明" prop="lendRemark">
                <p-input
                  v-model="form.lendRemark"
                />
              </p-form-model-item>
            </p-col>

         </p-row>
      
      </p-form-model>    


      <PeopleNeed ref="peopleNeed"></PeopleNeed>


    <RenderTitle :title="'中试工艺部'">
    </RenderTitle>

    <CraftDepartment></CraftDepartment>

    <RenderTitle :title="'生产制造部'">
    </RenderTitle>

    <ProductionDepartment></ProductionDepartment>

    <StaffListModal ref="staffListModal" @handleSuccess = "selectContact"></StaffListModal>

    </p-modal>
  </div>
</template>
<script>
import { getDictItemsArr } from "@/utils/util";
import { postAction, getAction, deleteAction,  api, putAction } from "@/api/manage";
import RenderTitle from '@/components/renderTitle'
import PeopleNeed from './peopleNeed.vue'
import CraftDepartment from './craftDepartment.vue'
import ProductionDepartment from './productionDepartment.vue'
import StaffListModal from './staffListModal.vue'
import {mapState} from 'vuex'
import moment from "moment";



export default {
  data() {
    return {
      state: 'add',
      visible: false,
      confirmLoading: false,
      labelCol: { span: 8},
      wrapperCol: { span: 12 },
      other: '',
      skillPropertyKeys: {},
      editId: '',
      form: {
        applyNo: '',
        skillProperty:'',
        deptname: '',
        skillIndate: '',
        phone: '',
        costCenter: '', 
        lendRemark: '',
        skillneedAddParams: [],
      },
      rules: {
        skillProperty: [{ required: true, message: '请选择技能属性', trigger: 'blur' }],
        deptname: [{ required: true, message: '请输入复核到期提前时间', trigger: 'blur' }],
        skillIndate: [{ required: true, message: '请输入技能有效期', trigger: 'blur' }],
        contact: [{ required: true, message: '联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '联系电话', trigger: 'blur' }],
        costCenter: [{ required: true, message: '请输入成本中心', trigger: 'blur' }],
        lendRemark: [{ required: true, message: '请输入借调说明', trigger: 'blur' }],
      },  
      url: {
        // add: '/mes-manpower/mesHrSkillBank',
        // edit: '/mes-manpower/mesHrSkillBank',
        staffInfo: '/poros-permission/secStaff/getUserByUid',// 根据uid获取用户信息
        addManpower: '/mes-manpower/mesHrManpowerLendoutApply', // 新增人力外借申请管理
      }    
    };
  },

  computed: {
    title(){
      return this.state == 'add' ? '新增' : '编辑'
    },
    ...mapState({
      userInfo:state => state.user,
    })
  },


  mounted() {
    this.getAjaxGetDictItems()
  },
  methods: {
    moment,

      // 自动生成单据
    getRuleCodeValue() {
      let param = {
        commonFormData: {},
        rules: [
          { ruleCode: "mes_human_lend", columnName: "labelTemplateNo" },
        ],
      };
      putAction(api.ruleBaseURL, param).then((res) => {
        // 执行成功，获取返回的值，并赋到页面上
        if (res.success) {
          console.log("生成的编码：" + res.data);
          const item = res.data;
          this.form.applyNo = res.data.labelTemplateNo
        }
      });
    },


    // 获取部门信息
    getDeptname(){
      getAction(this.url.staffInfo + '/' + this.userInfo.uid).then( res => {
        if(res.success) {
          this.form.deptname = res.data.departmentName
        }
      } )
    },

    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "	mes_skill_property", key: "skillPropertyKeys" },
      ];
      getDictItemsArr(this, arr);
    },

    // 显示联系人选择弹窗
    showStaffListModal(){
      this.$refs.staffListModal.showModal()
    },

    // 选择联系人
    selectContact(info){
      this.form.contact = info.name
      this.form.phone = info.mobile
    },

    // 保存
    save(){

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.form.skillneedAddParams = this.$refs.peopleNeed.dataSource
          const params = {
            ...this.form
          }
          postAction(this.url.addManpower, params).then( res => {
            if(res.success) {
              this.handleCancel()
              this.$emit('handleSuccess')
            }
          } )
        }
      });        

    },


    showModal(record) {
      
      if(record) {
        
        this.state = 'edit'
        console.log(record);
        for (let key in this.form) {
          this.form[key] = record[key]
        }
        this.form.skillProperty = `${this.form.skillProperty}`
        this.editId = record.id
      } else {
        
        this.state = 'add'
        this.getRuleCodeValue()
        this.getDeptname()
        // this.$refs.peopleNeed.dataSource = []
        // console.log(this.$refs.peopleNeed);
        
        this.$nextTick( () => {
          this.$refs.peopleNeed.clearData()
        } )

        console.log(22222);
        
      }
      this.visible = true;
    },

    handleOk(e) {
      this.confirmLoading = true;
      const params = JSON.parse(JSON.stringify(this.form))

      if( this.state == 'add'  ) {
        postAction(this.url.add, params).then( res => {
          if( res.success) {
            this.visible = false;
            this.confirmLoading = false;  
            this.$emit('handleSuccess')        
          }
        } )
      }

      if( this.state == 'edit' ) {
        params.id = this.editId
        putAction(this.url.edit, params).then( res => {
          if( res.success) {
            this.visible = false;
            this.confirmLoading = false;  
            this.$emit('handleSuccess')        
          }
        } )        
      }
    },

    handleCancel(e) {
      this.visible = false;
      Object.assign(this.form, this.$options.data().form);
      this.$refs.ruleForm.resetFields()
    },
  },
  components: {
    RenderTitle,
    PeopleNeed,
    CraftDepartment,
    ProductionDepartment,
    StaffListModal
  }
};
</script>


<style lang="less">
  .skill-form.poros-form .poros-form-item {
    margin-bottom: 5px;
    min-height: 55px; 
  }
</style>
